<template>
<div id="">
    <!-- reactive方法:处理对象以及数组的响应式 -->
    <p>{{obj.name}}</p>
    <p>{{obj.age}}</p>
    <button @click="hdClick">reactive按钮</button>
    <p>-------------------------------</p>
    <p>{{arr[0]}}</p>
    <p>{{arr}}</p>
    <button @click="hdClickArr">reactive按钮</button>
</div>
</template>

<script>
import {
    reactive
} from "vue"
export default {
    setup() {
        let obj = {
            name: 'Vue',
            age: 3
        }
        obj = reactive(obj);
        let hdClick = () => {
            obj.age++;
        }

        let arr = [1, 2, 3];
        arr=reactive(arr);
        let hdClickArr = () => {
            arr[0]='你被我取代了'
        }

        return {
            obj,
            hdClick,
            arr,
            hdClickArr
        }
    }
}
</script>

<style lang="less" scoped>
</style>
